<template>
  <view class="form-ret-padd">
    <view class="spec-com">
      <view class="flex-btw flexAIC w100">
        <view class="title">
          {{ spec.title }}
        </view>
        <view class="flex options flex-end flex1">
          <view
            :class="[
              'marginRight-50',
              'add',
              spec.attrList.length > 2 ? 'disable' : '',
            ]"
            @click="editSpec(0)"
            >添加规格值</view
          >
          <view
            class="delete"
            v-if="pubUserInfo.mainShopStatus"
            @click="deleteSpec"
            >删除</view
          >
        </view>
      </view>
      <view class="flex spec-list">
        <view
          v-for="(item, index) in spec.attrList"
          :key="index"
          class="spec-value center"
        >
          <view>{{ item.title }}</view>
          <view
            @click="deleteAttr(index)"
            v-if="pubUserInfo.mainShopStatus"
            class="delete center"
            ><u-icon name="close" size="12" color="#fff"
          /></view>
        </view>
      </view>
    </view>
    <u-popup
      :show="showSpec"
      round="8"
      mode="center"
      :safeAreaInsetBottom="false"
      @close="closeSpec()"
    >
      <view class="add-spec">
        <view class="content">
          <view class="title">{{ type == 0 ? "添加规格值" : "编辑规格" }}</view>
          <u--form :model="form" :rules="rules" ref="form1">
            <u-form-item prop="specVal" labelWidth="0rpx">
              <view class="show-count">
                <u--input
                  v-model="form.specVal"
                  maxlength="10"
                  :showWordLimit="true"
                  placeholder="请输入规格值"
                />
                <view class="num">{{ form.specVal.length }}/10</view></view
              >
            </u-form-item>
          </u--form>
        </view>
        <view class="btns flex text-28">
          <view class="flex1 cancel center" @click="closeSpec()">取消</view>
          <view class="flex1 save center" @click="save()">保存</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import { addSpecValue } from "@/service/api/sp-product/index";
import { mapState } from "vuex";
export default {
  data() {
    return {
      showSpec: false,
      type: 0,
      form: {
        specVal: "",
      },
      rules: {
        specVal: [
          {
            type: "string",
            required: true,
            message: "请输入规格值",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              let { attrList } = this.spec;
              let flag = true;
              if (attrList.length > 0) {
                attrList.some((v) => {
                  if (value === v.title) {
                    flag = false;
                  }
                });
              }
              return flag;
            },
            message: "已存在该销售属性",
            // 触发器可以同时用blur和change
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  props: {
    spec: {
      require: true,
      deep: true,
    },
  },
  computed: {
    ...mapState("sp-common/auth", ["pubUserInfo"]),
  },
  onReady() {
    this.$refs.form1.setRules(this.rules);
  },
  methods: {
    closeSpec(type) {
      this.showSpec = type ? true : false;
      !type ? (this.form.specVal = "") : "";
      this.$refs.form1.clearValidate();
    },
    editSpec(type) {
      if (this.spec.attrList.length > 2) return;
      this.form.specVal = type == 1 ? name : "";
      this.type = type;
      this.showSpec = true;
    },
    save() {
      this.$refs.form1.validate().then((res) => {
        let {
          form: { specVal: title },
          spec: { id: specId },
        } = this;
        addSpecValue({ specId, title }).then((res) => {
          this.$emit("addAttr", { id: res, title });
          this.closeSpec();
        });
      });
    },
    deleteSpec() {
      this.$emit("deleteSpec");
    },
    deleteAttr(index) {
      let {
        spec: { attrList },
      } = this;
      let cloneAttr = JSON.parse(JSON.stringify(attrList));
      cloneAttr.splice(index, 1);
      this.$emit("deleteAttr", cloneAttr);
    },
  },
};
</script>
<style lang="scss" scoped>
.spec-com {
  padding: 40rpx 25rpx;
  border-radius: 12rpx;
  background-color: #fff;
  margin-bottom: 30rpx;
  .w100 {
    margin-bottom: 45rpx;
  }
  .title {
    font-size: 29rpx;
    font-weight: 500;
  }
  .options {
    font-size: 29rpx;
    .add {
      color: var(--theme);
    }
    .delete {
      color: #888888;
      opacity: 0.8;
    }
    .disable {
      opacity: 0.5;
    }
  }
  .spec-list {
    padding: 0 8rpx;
  }
  .spec-value {
    height: 50rpx;
    min-width: 110rpx;
    border: 1px solid #c6c6c6;
    border-radius: 8rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #131313;
    margin-right: 40rpx;
    position: relative;
    .delete {
      position: absolute;
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      background-color: #f05357;
      color: #fff;
      top: -10rpx;
      right: -10rpx;
    }
  }
}
.add-spec {
  width: calc(100vw - 250rpx);
  overflow: hidden;
  .content {
    padding: 0 45rpx;
    margin-bottom: 25rpx;
    ::v-deep .u-form-item__body {
      padding: 0 !important;
    }
  }
  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #131313;
    text-align: center;
    padding: 40rpx 0 25rpx;
  }
  .btns {
    width: 100%;
    height: 80rpx;
    overflow: hidden;
    border-radius: 0 0 12rpx 12rpx;
    view {
      font-weight: 500;
      color: #fff;
      background-color: var(--theme);
    }
    .cancel {
      border-top: 1rpx solid #eee;
      color: var(--theme) !important;
      background-color: #fff !important;
    }
  }
}
</style>
